<template>
  <div class="login-container">
    <div class="login-background">
      <div class="circles">
        <div v-for="n in 10" :key="n" :class="`circle circle-${n}`"></div>
      </div>
    </div>

    <div class="login-content">
      <div class="login-header">
        <div class="logo-container">
          <img src="@/assets/images/logo.png" alt="Logo" class="logo" />
        </div>
        <h1 class="title">大同AI赋能</h1>
        <p class="subtitle">让天下没有难做的生意</p>
      </div>

      <div class="login-form">
        <a-form-model ref="loginForm" :model="formData" :rules="rules" @submit.native.prevent="handleSubmit">
          <a-form-model-item prop="account">
            <a-input v-model="formData.account" size="large" placeholder="请输入用户名" class="custom-input">
              <a-icon slot="prefix" type="user" class="input-icon" />
            </a-input>
          </a-form-model-item>

          <a-form-model-item prop="password">
            <a-input-password v-model="formData.password" size="large" placeholder="请输入密码" class="custom-input">
              <a-icon slot="prefix" type="lock" class="input-icon" />
            </a-input-password>
          </a-form-model-item>

          <div class="form-actions">
            <a-checkbox v-model="formData.remember" class="custom-checkbox">
              记住我
            </a-checkbox>
            <a class="forgot-link" @click="$router.push('/auth/forgot-password')">
              忘记密码？
            </a>
          </div>

          <a-button type="primary" html-type="submit" size="large" block class="login-button" :loading="loading">
            <span class="button-text">{{ loading ? '登录中...' : '立即登录' }}</span>
          </a-button>
        </a-form-model>

        <div class="other-actions">
          <p class="register-text">
            还没有账号？
            <a class="register-link" @click="$router.push('/auth/register')">立即注册</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "md5";
export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      formData: {
        account: '',
        password: '',
        remember: false
      },
      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, message: '用户名至少3个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码至少6个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        await this.$refs.loginForm.validate()
        this.loading = true
        await this.$store.dispatch('user/login', {
          account: this.formData.account,
          password: md5(this.formData.password)
        }).then(async (res) => {
          if (res.code == 200) {
            await this.$store.dispatch('user/getUserInfo').then(response => {
              if (response.code == 200) {
                this.$message.success('登录成功')
                // const redirect = this.$route.query.redirect || '/user'
                this.$router.replace('/user')
              }
            });
          } else {
            this.$message.error('登录失败：' + error.message)
          }
          this.loginBtnLoading = false;
        })
          .catch((error) => {
            this.loginBtnLoading = false;
            this.$message.error('登录失败：' + error.message)
          })
          .finally(() => { });
      } catch (error) {
        this.$message.error(error.message || '登录失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  overflow: hidden;
}

.login-background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circle {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
  border-radius: 50%;
}

.circle-1 {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circle-2 {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circle-3 {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circle-4 {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circle-5 {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circle-6 {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circle-7 {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circle-8 {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circle-9 {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circle-10 {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

.login-content {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;

  .logo-container {
    margin-bottom: 20px;

    .logo {
      width: 80px;
      height: 80px;
    }
  }

  .title {
    font-size: 28px;
    color: #333;
    margin: 0;
    font-weight: 600;
  }

  .subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 8px;
  }
}

.login-form {
  :deep(.ant-form-item) {
    margin-bottom: 24px;
  }

  :deep(.custom-input) {
    .ant-input {
      height: 44px;
      padding: 4px 11px 4px 40px;
      font-size: 14px;
      border-radius: 8px;
      border: 1px solid #d9d9d9;
      box-shadow: none;
      transition: all 0.3s;

      &::placeholder {
        color: #bfbfbf;
      }

      &:hover {
        border-color: #40a9ff;
      }

      &:focus {
        border-color: #40a9ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }
    }

    .ant-input-prefix {
      left: 12px;

      .input-icon {
        font-size: 16px;
        color: #bfbfbf;
      }
    }
  }

  :deep(.ant-input-affix-wrapper) {
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;

    &:hover {
      .ant-input {
        border-color: #40a9ff;
      }

      .input-icon {
        color: #40a9ff;
      }
    }

    &-focused {
      .ant-input {
        border-color: #40a9ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }

      .input-icon {
        color: #40a9ff;
      }
    }
  }

  :deep(.ant-input-password) {
    .ant-input {
      padding-right: 40px;
    }

    .ant-input-suffix {
      right: 12px;

      .anticon {
        color: #bfbfbf;

        &:hover {
          color: #40a9ff;
        }
      }
    }
  }

  :deep(.ant-form-item-has-error) {
    .ant-input {
      border-color: #ff4d4f;

      &:hover {
        border-color: #ff7875;
      }

      &:focus {
        border-color: #ff7875;
        box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
      }
    }

    .input-icon {
      color: #ff4d4f;
    }
  }

  :deep(.ant-form-item-explain) {
    margin-top: 4px;
    font-size: 13px;
  }
}

.form-actions {
  margin-bottom: 28px;

  :deep(.custom-checkbox) {
    .ant-checkbox {
      top: 0.2em;

      &-inner {
        width: 18px;
        height: 18px;
        border-radius: 4px;

        &::after {
          width: 6px;
          height: 10px;
          left: 5px;
        }
      }
    }

    .ant-checkbox-checked .ant-checkbox-inner {
      background-color: #1890ff;
      border-color: #1890ff;
    }

    span {
      font-size: 14px;
      color: #666;
    }
  }

  .forgot-link {
    font-size: 14px;
    color: #1890ff;
    transition: all 0.3s;

    &:hover {
      color: #40a9ff;
      text-decoration: none;
    }
  }
}

.login-button {
  height: 50px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  border-radius: 25px;
  background: linear-gradient(135deg, #1890ff, #1858ff);
  border: none;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .button-text {
    display: inline-block;
    transition: transform 0.3s;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);

    .button-text {
      transform: scale(1.02);
    }
  }

  &:active {
    transform: translateY(0);
  }
}

.other-actions {
  margin-top: 28px;

  .register-text {
    font-size: 14px;
    color: #666;

    .register-link {
      color: #1890ff;
      font-weight: 500;
      margin-left: 6px;
      transition: all 0.3s;

      &:hover {
        color: #40a9ff;
        text-decoration: none;
      }
    }
  }
}

@media screen and (max-width: 576px) {
  .login-content {
    margin: 20px;
    padding: 30px 20px;
  }

  .login-header {
    .title {
      font-size: 24px;
    }

    .subtitle {
      font-size: 14px;
    }
  }

  .login-form {
    :deep(.custom-input) {
      height: 46px;

      .ant-input {
        height: 46px;
        font-size: 14px;
      }

      .input-icon {
        font-size: 16px;
      }
    }
  }

  .login-button {
    height: 46px;
    font-size: 15px;
  }
}

@keyframes focusIn {
  from {
    transform: scale(0.98);
    opacity: 0.8;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.login-form {
  :deep(.ant-input-affix-wrapper-focused) {
    animation: focusIn 0.2s ease-out;
  }
}
</style>